<template>
  <div class="tinymce-editor">
    <editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick"></editor>
    <!-- <el-button class="editor-clear" type="text" @click="clear">清空</el-button> -->
  </div>
</template>
<script>
import commonApi from '@/api/common'
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import 'tinymce/themes/silver/theme'
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import "tinymce/plugins/image"; // 插入上传图片插件
import 'tinymce/plugins/media' // 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/icons/default"; // 插入表格插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/wordcount"; // 字数统计插件
export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    type: {
      type: Number,
      default: 1
    },
    // 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式，
    // 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到
    baseUrl: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: "lists image media table wordcount"
      // default:''
    },
    // 在toolbar中添加工具栏相应按钮
    toolbar: {
      type: [String, Array],
      default: 'code undo redo restoredraft  | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | | fullscreen | bdmap indent2em lineheight formatpainter axupimgs| table image media charmap emoticons hr pagebreak insertdatetime print preview | bullist numlist | cut copy paste pastetext\
        styleselect formatselect fontselect fontsizeselect | blockquote subscript superscript removeformat'

    }
  },
  data() {
    return {
      init: {
        language_url: `/static/tinymce/langs/zh_CN.js`, // 语言包路径
        language: "zh_CN", //语言
        skin_url: `/static/tinymce/skins/ui/oxide`, //skin路径
        content_css: `/static/tinymce/skins/content/default/content.css`,
        // skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide-dark`, // 暗色系
        // content_css: `${this.baseUrl}/tinymce/skins/content/dark/content.css`, // 暗色系
        height: 500, //编辑器高度
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false, //是否禁用“Powered by TinyMCE”
        menubar: false, //顶部菜单栏显示
        paste_data_images: true, // 允许粘贴图像
        importcss_append: true,
        toolbar_mode: 'wrap',
        toolbar_sticky: true,
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif',
        // 此处为图片上传处理函数
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        //    添加扩展插件
        external_plugins: {
          'powerpaste': '/static/tinymce/plugins/powerpaste/plugin.min.js'
        },
        setup: editor => {
          editor.on('input change', () => {
            this.$emit("input", editor.getContent());
          });
        },
        images_upload_handler: (blobInfo, success, failure) => {
          console.log(blobInfo)
          const that = this
          // success('https://obs-18059865572.obs.cn-south-1.myhuaweicloud.com:443/bank/CodeMe/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/20211124110939_6358%E6%96%87%E5%AD%97%EF%BC%89-01.jpg');
          // return;
          var formdata = new FormData();
          let data = {
            folder: 'richText'
          }
          formdata.append('data', JSON.stringify(data))
          formdata.append('file_name', blobInfo.blob())
          commonApi.uploadFile(formdata).then(res => {
            console.log(res, '图片上传')
            if (res.code == 200) {
              success(res.data.file_url)
            } else {
              failure(err)
            }
          }).catch(err => {
            console.log(err)
            failure(err)
          })
          // Api.uploadFile.execute(data, 'img_url', blobInfo.blob()).then(res => {
          //   if (res.code == '0001') {
          //     // console.log(res)
          //     success(res.data)
          //   } else {
          //     failure('error')
          //   }
          // }).catch(err => {
          //   console.log(err)
          //   failure(err)
          // })
        },
      },
      myValue: this.value
    };
  },
  mounted() {
    tinymce.init({});
  },
  methods: {
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    onClick(e) {
      this.$emit("onClick", e, tinymce);
    },
    // 可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.myValue = "";
    }
  },
  watch: {
    value: {
      handler(val) {
        this.myValue = val
      },
      deep: true
    },
    // myValue: {
    //   handler(val) {
    //     this.$emit("input", val);
    //   },
    //   deep: true
    // },
  }
};

</script>
<style lang="scss">
.tinymce-editor {
  width: 820px;
  position: relative;

  .editor-clear {
    position: absolute;
    right: 15px;
    top: 0px;
    z-index: 999;
  }
}
</style>